<template>
  <div class="hight100" v-if="productDetail">
    <location-link class="location-pos" :cur="activeIndex" :linkArr="linkArr" v-show="showDownArrow"></location-link>
    <swiper class="main-swiper" :options="mainSwiperOptions" ref="mainSwiper">
      <swiper-slide class="page-one" ref="pageOne">
        <screen-one></screen-one>
      </swiper-slide>
      <swiper-slide v-if="productDetail.features">
        <feature :bannerUrl="productDetail.img1" :featureList="productDetail.features"></feature>
      </swiper-slide>
      <swiper-slide v-if="productDetail.process">
        <get-process :bannerUrl="productDetail.img1" :processList="productDetail.process"></get-process>
      </swiper-slide>
      <swiper-slide v-if="productDetail.apply">
        <online-todo :bannerUrl="productDetail.img1" :codeUrl="productDetail.apply"></online-todo>
      </swiper-slide>
      <swiper-slide>
        <footer-screen></footer-screen>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
  import footerScreen from 'src/components/footer/footer'
  import screenOne from './product-one'
  import getProcess from './get-process'
  import feature from './feature'
  import onlineTodo from './online-todo'
  import swiperConfig from 'src/mixins/swiperConfig'
  import locationLink from 'src/views/location/location'
  import { mapGetters, mapMutations } from 'vuex'
  import request from 'src/util/request'

  export default {
    name: 'wages',
    mixins: [swiperConfig],
    data () {
      return {
        activeIndex: 0,
        linkArr: []
      }
    },
    computed: {
      ...mapGetters([
        'showDownArrow',
        'productDetail'
      ])
    },
    props: {
    },
    watch: {
      '$route.params' () {
        this._initAjax()
      },
      productDetail (val) {
        if (val) {
          if (this.$route.params.productType === 'PRODUCT_2' && +this.$route.params.id === 0) {
            this.$nextTick(() => {
              const one = this.$refs.pageOne.$el.querySelector('.page-one')
              one.style.backgroundColor = '#f3f3f3'
              one.style.color = '#333'
            })
          }
        }
      }
    },
    components: {
      footerScreen,
      locationLink,
      screenOne,
      getProcess,
      onlineTodo,
      feature
    },
    methods: {
      _initAjax () {
        const productType = this.$route.params.productType
        this.activeIndex = this.$route.params.id
        this.setProductDetail(null)

        request({
          url: `/api/wap/topic/simple/${productType}`,
          loading: true
        })().then(data => {
          this.setProductDetail(data[this.activeIndex])
          let arr = []
          data.forEach((item, index) => {
            arr.push({
              name: item.title,
              href: `/product/${productType}/${index}`
            })
          })
          setTimeout(() => {
            this.mainSwiper.slideTo(0, 0, false)
          }, 20)
          this.linkArr = arr
        })
      },
      ...mapMutations({
        setProductDetail: 'SET_productDetail'
      })
    },
    mounted () {

    },
    created () {
      this._initAjax()
    }
  }
</script>

<style lang="scss">
  .page-one {
  	color: #fff;
  	background-color: #bc2720;
  }
</style>
